import { StyleSheet, Dimensions, Platform } from 'react-native';

const { width } = Dimensions.get('window');
const BORDER_RADIUS = 16;
const ICON_SIZE = 32;

/**
 * 支付页面样式定义
 */
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },

  scrollView: {
    flex: 1,
  },

  // 商品信息区域样式
  productInfoContainer: {
    backgroundColor: '#fff',
    padding: 16,
    marginBottom: 10,
  },

  productInfoHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },

  productImage: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: '#e6f7ff',
  },

  productDetails: {
    flex: 1,
    marginLeft: 12,
  },

  productTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    lineHeight: 22,
    marginBottom: 8,
  },

  productPrice: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ff4d4f',
  },
  productPriceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },

  // 优惠区域样式
  discountContainer: {
    backgroundColor: '#fff',
    marginBottom: 10,
  },

  discountItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },

  discountLabel: {
    fontSize: 16,
    color: '#333',
    flex: 1,
  },

  discountValueContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  discountValue: {
    fontSize: 14,
    color: '#999',
    marginRight: 8,
  },

  arrowIcon: {
    width: 8,
    height: 8,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
    transform: [{ rotate: '45deg' }],
  },

  checkbox: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
    marginLeft: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },

  checkboxUnselected: {
    borderColor: '#d9d9d9',
  },

  checkboxSelected: {
    borderColor: '#1890ff',
    backgroundColor: '#e6f7ff',
  },

  discountNote: {
    padding: 12,
    fontSize: 13,
    color: '#999',
  },

  // 金额明细区域样式
  priceContainer: {
    backgroundColor: '#fff',
    marginBottom: 10,
  },

  priceItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },

  priceLabel: {
    fontSize: 16,
    color: '#333',
  },

  priceValue: {
    fontSize: 16,
    color: '#333',
  },

  balanceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  rechargeText: {
    fontSize: 14,
    color: '#1890ff',
    marginRight: 8,
  },

  balanceValue: {
    fontSize: 16,
    color: '#ff4d4f',
    marginRight: 12,
  },

  switch: {
    width: 44,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#d9d9d9',
    padding: 2,
    justifyContent: 'flex-start',
  },

  switchActive: {
    backgroundColor: '#1890ff',
    justifyContent: 'flex-end',
  },

  switchThumb: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#fff',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.2,
        shadowRadius: 1,
      },
      android: {
        elevation: 2,
      },
    }),
  },

  // 支付方式选择区域样式
  paymentContainer: {
    backgroundColor: '#fff',
    marginBottom: 10,
  },

  sectionTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },

  paymentOption: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },

  paymentLeftContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  paymentIcon: {
    width: ICON_SIZE,
    height: ICON_SIZE,
    borderRadius: ICON_SIZE / 2,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },

  alipayIcon: {
    backgroundColor: '#1677ff',
  },

  wechatIcon: {
    backgroundColor: '#07c160',
  },

  friendIcon: {
    backgroundColor: '#ff7a45',
  },

  paymentIconText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },

  paymentTitle: {
    fontSize: 16,
    color: '#333',
  },

  radioButton: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#d9d9d9',
    justifyContent: 'center',
    alignItems: 'center',
  },

  radioButtonSelected: {
    borderColor: '#1890ff',
  },

  radioButtonInner: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#1890ff',
  },

  // 底部空间，确保内容不被底部按钮遮挡
  bottomSpace: {
    height: 80,
  },

  // 底部提交订单栏样式
  submitBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff',
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
    ...Platform.select({
      ios: {
        paddingBottom: 28, // 为iOS底部安全区留出空间
      },
    }),
  },

  submitBarLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },

  submitBarLabel: {
    fontSize: 14,
    color: '#666',
    marginRight: 8,
  },

  submitBarPrice: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ff4d4f',
  },

  submitButton: {
    backgroundColor: '#ff4d4f',
    paddingHorizontal: 32,
    paddingVertical: 10,
    borderRadius: BORDER_RADIUS,
    ...Platform.select({
      ios: {
        shadowColor: '#ff4d4f',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },

  submitButtonText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
});

export default styles;